<template>
    <div class="wrap">
        <Table
            :option="mixinOption" 
            :cloumn="cloumn"
            :searchForms="searchForm"
            :data="data"
            :loading="mixinLoading"
            :pageParams="mixinPageOption"
            @handelSearchForm="handelSearchForm"
            @clearSearchForm="clearSearchForm"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            @handleAdd="handleAdd"
            >
            <template v-slot:emptySlot>
                <el-form-item  label="日期" prop="date">
                    <el-date-picker
                    v-model="searchForm.date"
                    type="date"
                    placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>
                <el-form-item  label="监测点关键词搜索" prop="stationName">
                    <el-input  clearable v-model="searchForm.stationName" placeholder="监测点名称"></el-input>
                </el-form-item>
                <!-- <el-form-item  label="监测点" prop="stationId">
                    <el-select clearable v-model="searchForm.stationId">
                        <el-option
                        v-for="(item, index) in reservoirList"
                        :key="index" 
                        :label="item.reservoirName" 
                        :value="item.stationId"> </el-option>
                    </el-select>
                </el-form-item> -->
                <el-form-item  label="类型" prop="type">
                    <el-select clearable v-model="searchForm.type">
                        <el-option
                        v-for="(item, index) in typeList"
                        :key="index" 
                        :label="item.value" 
                        :value="item.code"> </el-option>
                    </el-select>
                </el-form-item>
            </template> 
        </Table>
        <!-- <add @onChange="onChangeAdd" :type="type" :id="editId" :visible="isAddShow"></add> -->
    </div>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import commonApi from '@/api/index'
 import bbcApi from '@/api/bbc'
// import add from './add.vue'

export default {
    name: 'index',
    components: {
        // add
    },
    data() {
        return {
            data: [],
             cloumn: [
               
                {
                    prop: 'reservoirName',
                    label: '监测点',
                },
                {
                    prop: 'ddatetime',
                    label: '发送时间',
                },
                {
                    prop: 'telphone',
                    label: '发送号码',
                },
                {
                    prop: 'receiveuser',
                    label: '接收人'
                },
                {
                    prop: 'type',
                    label: '预警类型',
                },
                {
                    prop: 'content',
                    label: '短信内容',
                },
            ],
            statusList:[
                {
                    label:'未备案',
                     class:'tab_no',
                    id:'0'
                },{
                    label:'已备案',
                     class:'tab_yes',
                    id:'1'
                }
            ],
            
            mixinOption: {
                page: true,
                index: true, // 开启索引
                indexTitle: '序号',
                addShow: false,  // 新增按钮
                border: true, // 开启边框,
                handleRowShow: false, //操作栏
                searchBtnShow: true, // 搜索按钮
                emptyBtnShow: true,
                searchHeader: true,
                viewBtnHide: true,
                editBtnHide: true,
                deleteBtnHide: true,
            },
            // 搜索
           
            searchForm: {
                date: '',
                stationName:'',
                type: ''
            },
            // 下拉数据
            typeList:[],
            reservoirList:[],
            // 新增编辑
            isAddShow:false,
            isDetailShow:false,
            editId:'',
            type:'add',
        }
    },
    watch:{
        'searchForm.date'(newValue){
            this.searchForm.date = newValue ? formatTimestamp(newValue, 'yyyy-MM-dd') : ''
        },
    },
    created() {
        // this.getReservoir()
        this.getDict('YJLX')
        this.getData()
    },
    mounted() {
    },
    methods: {
        getData() {
            this.mixinLoading = true
            bbcApi.findNoterByPageList({...this.mixinPageOption, ...this.searchForm})
            .then(res => {
                this.mixinLoading = false
                this.data = res.data.records
                this.mixinPageOption.total = res.data.total
            })
            .catch(() => {
                this.mixinLoading = false
            })
        },
        getDict(code){
            commonApi.getByType(code)
                .then(res => {
                    this.typeList = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },
        getReservoir() {
            bbcApi.stationSelect()
                .then(res => {
                    this.reservoirList = res.data
                })
                .catch(err => {
                    this.$message.error(err.message)
                })
        },

        handleConfirm(item){

        },

        // 新增编辑
        handleAdd(){
            
            this.isAddShow = true
            this.type = 'add'
            this.editId = ''
        },
        handleEdit(item){
            this.isAddShow = true
            this.type = 'edit'
            this.editId = item.stationId
        },
        // 详情
        handleView(scope){
          this.$router.push({
            name:'accidentEvetExamineDetail',
            query:{
                id:scope.row.stationId
            }
          })
        },
    }
    
}
</script>
<style lang='scss' scoped>
    .wrap{
        width: calc(100% - 40px);
        height: calc(100% - 20px);
        background: #FFFFFF;
        box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
        border-radius: 6px;
        padding: 10px 20px;
    }
    
</style>